<!-- Parent.vue -->
<template>
  <div>
    <h2>具名插槽示例</h2>

    <Layout>
      <!-- 头部内容：使用 #header 简写指定放入 header 插槽 -->
      <template #header>
        <h1>我的网站</h1>
        <nav>
          <a href="/home">首页</a>
          <a href="/about">关于</a>
        </nav>
      </template>

      <!-- 主体内容：使用 #main 简写指定放入 main 插槽 -->
      <template #main>
        <h2>欢迎来到首页</h2>
        <p>这是网站的主要内容区域...</p>
        <img src="https://picsum.photos/400/200" alt="网站配图">
      </template>

      <!-- 底部内容：使用 #footer 简写指定放入 footer 插槽 -->
      <template #footer>
        <p>© 2023 我的网站 版权所有</p>
      </template>
    </Layout>
  </div>
</template>

<script setup>
import Layout from './Layout.vue'
</script>